<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
	*{
		padding: 0;
		margin: 0;
	}
	#list li{
		list-style: none;
		font-size: 190px;
		font-family: 微软雅黑;
		float: left;
		margin: 30px;
	}
</style>
<script type="text/javascript">
	window.onload = function(){
		var list = document.getElementById('list');
		var arr = ['A','B','C','D','E','F','G','H'];

		// 给窗口加一个键盘按下事件
		window.onkeydown = function(e){
			var ev = window.event || e;//获得事件对象
			// 获得按下的是哪个键
			var word = String.fromCharCode(ev.keyCode);
			var lis = list.getElementsByTagName('li');//获得所有li
			// 对li循环，如果有li的内容和按下的字母一样，那么就删掉这个li
			for(var i=0;i<lis.length;i++){
				if(lis[i].innerHTML == word){
					// 删除i号li
					list.removeChild(lis[i]);
					// 抽取随机数
					var num = Math.floor(Math.random()*arr.length);
					// 创建新li标签
					var newLi = document.createElement('li');
					// 给新创建的li标签加内容
					newLi.innerHTML = arr[num];
					// 把新创建的li追加到ul中
					list.appendChild(newLi);
					// 跳出循环
					break;
				}
			}
		}
	}
</script>
</head>

<body>

	<ul id="list">
		<li>A</li>
		<li>B</li>
		<li>C</li>
		<li>D</li>
		<li>E</li>
	</ul>

</body>
</html>
